<template>
  <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title" :buttons="buttons"
    :isCancleBtn="props.modelType == 6 && !props.tokenStr ||props.modelType == 7 ||props.modelType == 8 ? false : true" @handleCancle="handleCancle" @handleOk="buttonMessage"
    class="move_modal">
    <template v-slot:body>
      <a-form name="advanced_search" autoComplete="off" class="ant-advanced-search-form" :model="formState"
        ref="columnFrom">
        <!-- 新建目录 -->
        <a-form-item label="项目名称" name="directoryName" :rules="[{ required: true, trigger: 'blur', message: '请输入项目名称!' }]"
          v-if="props.modelType == 4">
          <div class="modelType4">
            <a-input v-model:value="formState.directoryName"></a-input>
          </div>
        </a-form-item>
      </a-form>
      <div v-if="props.modelType == 6" class="modelType6">
        <div class="wxLogin">
          <div class="login_container">
            <div id="login_container"></div>
          </div>
        </div>
      </div>
      <div v-if="props.modelType == 8 || props.modelType == 7" class="modelType6">
        <div class="wxLogin">
          <div class="login_container">
            <div id="login_container"></div>
          </div>
        </div>
      </div>
    </template>
  </base-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, defineEmits } from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import { message } from "ant-design-vue";
import { dataSourceType } from "@/type";
import request from "@/api/index";
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  modelType: {
    type: Number,
    default: null,
  },
  relativePath: {
    type: String,
    default: "",
  },
  tokenStr: {
    type: String,
    default: null,
  },
});
let buttons = ref<dataSourceType[]>([
  {
    text: "确定",
    "html-type": "submit",
    keepAlive: true,
  },
]);
//模态框数据
const modAlProps = reactive<dataSourceType>({
  width: "M",
  title:
    props.modelType == 1
      ? "新建项目"
      : props.modelType == 2
        ? "导出模板"
        : props.modelType == 3
          ? "上传"
          : props.modelType == 4
            ? "新建项目"
            : props.modelType == 5 ? "查看引用" : props.modelType == 6 ? "下载模板"  : props.modelType == 7  ? "上传至可视化编辑器" : props.modelType == 8 && "可视化编辑",
});

const formState = ref<dataSourceType>({
  uploadFile: "",
  directoryName: "",
  relativePath: "",
  projectName: {
    value: "",
  }
});

// data
const columnFrom = ref<any>("columnFrom");
const emits = defineEmits(["handleOk", "handleCancle", "getProList"]);

const buttonMessage = async (msg: dataSourceType) => {
  columnFrom.value
    .validate()
    .then(() => {
       if (props.modelType == 4) {
        const data = {
          dirName: formState.value.directoryName,
          lowCodeToken: props.tokenStr,
        }
        console.log(data);
        request.createLowCodeDir(data).then((res: any) => {
            if (res.code == "00000 00000") {
              emits("handleOk", msg);
              emits("getProList")
              message.success(res.message);
            } else {
              message.error(res.message);
            }
          })
          .catch((err: any) => {
            console.log(err, 9999);
          });
      }
    })
    .catch(() => { });
};

const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};

// 微信扫码
const initWx = () => {
  let path = window.location.origin
  let redirect_uri = ''
  if(path.includes('admin')) {
    redirect_uri = "http://vtest.jeecms.com/console/index.html"
  } else {
    redirect_uri = "http://v.jeecms.com/console/index.html"
  }
      let obj = new WxLogin({
        self_redirect: false,
        id: "login_container",
        appid: "wxbad43f79c9f07882",
        scope: "snsapi_login",
        redirect_uri: redirect_uri,
        state: true,
        style: "",
        href: "",
      });
      console.log(obj, 'initWxObj');
      // buttons.value = [{}]
};

//onmounted
onMounted(async () => {
  switch (props.modelType) {
    case 6: initWx();
      break;
      case 7: initWx();
      break;
      case 8: initWx();
      break;
  }
});
</script>

<style lang="scss" scoped>
.move_modal {
  display: flex;

  span {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 28px;
  }

  span:first-child {
    width: 70px;
    text-align: right;
  }

  .openorclose {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 32px;

    .iconfont {
      margin-left: 5px;
      color: rgba(0, 0, 0, 0.85);
    }
  }

  .modelType3 {
    display: flex;
  }

  .modelType5 {
    .wxLogin {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 576px;
      height: 385px;
    }

    // display: flex;
    .modelType5Box {
      display: flex;
      padding: 16px 0;
      border-bottom: 1px solid #f0f0f0;

      >div {
        width: 50%;

        span:first-child {
          // margin-right: 12px;
        }
      }
    }
  }

  .modelType6 {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

:deep(.ant-form-item:last-child) {
  margin-bottom: 0;
}

:deep(.ant-table-cell:nth-last-child(1)) {
  text-align: right;
}

::v-deep(.ant-table-body) {
  max-height: 500px;
}
</style>
